<template>
    <div >
        <el-container>
            <el-card class="box-card">
            <el-header>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>我租的车位</el-breadcrumb-item>
                        <el-breadcrumb-item>车位详细</el-breadcrumb-item>
                    </el-breadcrumb>
            </el-header>
            <el-main>
                <el-container>
                    <el-header>
                        <el-breadcrumb style="line-height: 60px;" separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">解放碑万达车库</el-breadcrumb-item>
                            <el-breadcrumb-item>F区56号车位</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-header>
                    <el-container>
                        <el-aside width="200px">
                            <el-image
                                    style="width: 200px; height: 200px;"
                                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                                    fit="scale-down">
                                </el-image>
                        </el-aside>
                        <el-main>
                            <el-card class="box-card">
                                <el-row >
                                    <el-col :span="3">
                                        <el-tag type="info">当前进度：</el-tag>
                                    </el-col>
                                    <el-col :span="18">
                                        <el-tooltip placement="top">
                                            <div slot="content">开始时间：2021年5月12日22时31分12秒<br/>预计结算时间：2021年5月13日22时31分12秒</div>   
                                                <el-progress style="top: 13px" :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
                                        </el-tooltip>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-tag size="medium" effect="dark" type="danger">当前未到结算时间！结算不足时间将以一小时计算</el-tag>
                                    </el-col>
                                </el-row>
                                <el-tag type="success">当前消费金额：100元</el-tag>
                                <el-button type="primary" round @click="handleClick">立即结算</el-button>
                            </el-card>
                        </el-main>
                    </el-container>
                </el-container>
                
            
            </el-main>
            </el-card>
        </el-container>
    </div>
</template>

<script>
export default {
    name:"PayRetrun",
    data() {
        return{
            orderId:2,
        }
    },
    methods: {
        handleClick(){
            // alert(this.orderId);
            window.location.href = "http://192.168.70.33:8092/finishOrder?orderId=31";
            // this.$ax.put('http://localhost:8092/finishOrder',this.form).then((response) =>{
            //     console.log(response);
            //     this.$router.push({path:"/userapp/pay",query:{payhtml:response}});
            // }).catch(error =>{
            //     console.error(error);
            // });
            
        }
    }
}
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: white;
        color: block;
        text-align: center;
        line-height: 60px;
    }
    .el-aside {
    background-color: white;
    color: block;
    text-align: center;
    line-height: 200px;
    }
    
    .el-main {
        background-color: white;
        color: block;
        text-align: center;
        line-height: 50px;
    }

    .box-card{
        width:100%;
    }
</style>